<template>
<div class="drawer" :style="{right:right+'px'}">
  <div class="switch flex a-item j-content" @click="open">{{ drawerSwitch?"<":">" }}</div>
  <slot></slot>
</div>
</template>

<script>
export default {
  name: 'drawer',
  data(){
    return{
      right: -800,
      drawerSwitch: true
    }
  },
  mounted() {
    this.drawerSwitch = localStorage.getItem('drawerSwitch') === 'true'
    console.log(this.drawerSwitch)
    this.right = this.drawerSwitch?-800:0
    console.log(this.right)
  },
  methods:{
    open(){
      this.drawerSwitch = !this.drawerSwitch
      localStorage.setItem('drawerSwitch',this.drawerSwitch)
      this.right = this.drawerSwitch?-800:0
    }
  }
}
</script>

<style lang="scss" scoped>
.drawer{
  width: 800px;
  height: 450px;
  background-color: #ffffff;
  position: absolute;
  transition: all linear 0.5s;
  z-index: 555;
  box-shadow: 0 0 5px 3px rgba(203,203,203,0.5);
  .switch{
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    height: 50px;
    width: 50px;
    cursor: pointer;
    //transition: .3s;
    border-radius: 50%;
    background-color: rgba(31,45,61,.11);
    color: #fff;
    position: absolute;
    top: 50%;
    left: -25px;
    z-index: 10;
    transform: translateY(-50%);
    text-align: center;
    font-size: 18px;
    &:hover{
      background-color: rgba(31,45,61,0.6);
    }
  }
}
</style>
